body { 
    font-family: Arial, Helvetica, sans-serif, Tahoma;
    font-size: 14px;  
    background-color: #eeecec;
    width: 100%;   
}


 .body-content {
    margin-top: 105px;
}

.phan {
    height: 30px;
    background-color: #336699;
    color: #FFFFFF;
    font-weight: bold;
}

input,
select,
textarea {
    max-width: 100%;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}

.link1{
    font-size: 12px;
    font-family:Arial;
    color:brown;
}

.linkE{
    font-size: 13px;
    font-family:Arial,Calibri,Tahoma;
    color:#004D71;
    border: 2px solid  #5bc0de;
    padding: 3px 6px 4px 6px!important;   
}

.button1 {
    width:100px;
    background-color: #5cb85c;
    border: 1px solid #399918;
    color:  #ffffff;
    padding: 3px 5px 3px 5px!important;        
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-family:Arial,Calibri,Tahoma;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 8px 25px 0 rgba(0,0,0,0.19);
}
.radius5 {
    border-radius:5px;
}

.button1:hover,
.button1:focus,
.button1:active
{  
  background-color: #2d992d; /*#5ca563*/ ;
  border-color:#FFFF99; /* #fefebf;*/
}

.button1_disable { 
     background-color:#FFFF99; /*#C7FEEA;*/     
     border: 1px solid #6A6A6A;
     color: #666666;
}

.button2 { 
    background-color:#00b7f0; /* #d99494;*/
    border: 1px solid #46b8da; /*#ebcdcd;*/
    color:white !important; /*#9f4444*/
    padding: 2px!important;        
    text-align: center;
    text-decoration: none!important;
    font-size: 12px;
    font-family:Arial,Calibri,Tahoma;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 2px rgba(0,0,0,0.24);
    min-width:60px;
}

.button2:hover,
.button2:focus,
.button2:active
{  
 /* color:white!important;*/
  background-color:#3276b1; /*#bb5d5d;*/
  border-color:deepskyblue; /*#fea7b9; */
}

 .center-div
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
}

.footer {
    padding: 5px;   
    text-align: center;
    font-size: 14px;
    color: white;
    border: 1px solid #cccae6;
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;   
    box-shadow: 10px 15px 20px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);    
    background-color: #0D92F4;
    width: 100%;
}

 .fontMain {
             font-family: Arial, Helvetica, sans-serif, Tahoma;
             font-size: 14px;             
        }

.TitleBieu {
    padding-top: 20px;
    padding-bottom: 10px;  
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #0373c6!important;
    font-family: Cambria, Arial, Verdana!important;       
}

 .font-main {
             font-family: Arial, Helvetica, sans-serif, Tahoma;
             font-size: 15px;
         }

    .tab-color {
        background-color: #FFFCDF;
    }
   
     .label1{
            text-align: right;
            padding-right: 10px;
            color: #336699!important;
        } 
   
     .Bold {font-weight:bold; }
     .Italic { font-style:italic;}

     .TopDot {
        border-color: #B0B0B0;border-top-style: dotted; border-top-width: 1px;
     }

    .BotDot {
        border-color: #B0B0B0;border-bottom-style: dotted; border-bottom-width: 1px;
     } 

    .BotNone {
        border-bottom-style: none !important;
     }  

    .TopNone {
        border-top-style: none !important;
     }  

   .TextBox {
        font-family: Arial;
        font-size: 15px;
    }

     .TextBoxFocus {
          background-color:#ccffff;
          font-size: 15px;
     }  

      .TextBoxFocus input:focus{      
        background-color:#ccffff;            
    }    

     /*.combo_Box {
        font-family: Arial;
        font-size: 15px;   
        height: 24px;
        background-color: #eef8fb;
        color:#0f095e;       
    }*/

    .comboBox {
        font-family: Arial;
        font-size: 14px;   
        height: 24px;
        background-color: #eef8fb;
        color:#0f095e;       
    }

    .combo {
        font-family: Arial;
        font-size: 14px;   
        height: 24px;
        background-color: #eef8fb;
        color:#0f095e;
        border-bottom: 1px solid #cccae6;
    }


    .TableTab {
            width: 100%;
            text-align:left;
            background-color:#fffff4;
            border: 3px solid #61b0fe;
            font-family: Arial, Helvetica, sans-serif, Tahoma;
            font-size: 16px;             
     } 
     

    .Muc {
       color: #87304A; font-weight: bold;  font-size: 18px; padding: 10px ; text-align: center; font-family: Cambria, 'Times New Roman'; 
       border-color:#996633; border-bottom-style:solid;border-top-style:solid;border-width:1px;
   }

    .TitleBC {
           color: #387ac2;
           font-weight: bold;
           font-size: 18px;
           padding-top:10px;
           text-align: center;
           font-family: Cambria, 'Times New Roman';
       }

     .TitleCol {
           color: forestgreen;
           font-weight: bold;
           text-align: center;
           padding-top: 5px;
           padding-bottom: 5px; 
           border: 1px dotted #B0B0B0;
       }

       .TitleCol1 {
           color: forestgreen;
           font-weight: bold;
           text-align: center;
           padding:5px 3px 5px 3px;  
           border: 1px dotted #B0B0B0;    
           font-size:14px; 
           vertical-align:central;
       }
     

     .Bang {border-style:solid;border-width:1px;border-color: yellowgreen;}     
    
       .pNote {
             font-size: 14px;
             color: #515151;
             font-style: italic;
             font-weight: normal;
             padding-left: 10px;
             /*padding-top: 20px*/
         } 

   .NoXButton .dxeEditAreaSys::-ms-clear { display: none;
         }
           
        input,
        select,
        textarea {max-width: 100%;} 

       .hide {display: none;}
       .wid100 { width: 100%;}
       .wid50 { width: 50%;}
       .wid60 { width: 60%;}
       .wid10 { width: 10%;}
       .wid7 { width: 7%;}
       .wid20 { width: 15%;}
       .wid40 { width: 40%;}
       .wid70 { width: 70%;}  
       .wid75 { width: 75%;}  
       .wid600 { width: 600px;}

       .wid60p { width: 60px;}
       .wid80p { width: 80px;}
   
      
      .padL10 {padding-left: 10px;}
      .padL35 {padding-left: 35px;}
      .padL50 {padding-left: 50px!important;}
      .padL20 {padding-left: 20px!important;}
      .padL15 {padding-left: 15px!important;}
      .padL45 {padding-left: 45px!important;}
      .padL60 {padding-left: 60px!important;}
      .padL80 {padding-left: 80px!important;}
      .padL100 {padding-left: 100px!important;}   
      .padL150 {padding-left: 150px!important;}   
      .padR10 {padding-right: 10px!important;}   
   
      .padR10Font11 {
           padding-right: 10px;  
           font-size:11px;         
      }      
      
      .Cau {text-align: left;padding-top: 5px; padding-bottom:5px; color: #004D71;  }     
 
      .Cau1 {
          padding-top: 5px; padding-bottom:5px; padding-left: 25px; color: #004D71; text-align: left;     
    } 
     
   .Cau11 {
          font-size:14px; width: 18%; padding-top: 3px; padding-bottom: 3px; padding-left: 25px; color: #004D71; text-align: left;     
    } 

   .Cau12 {font-size:14px; padding-top: 5px; padding-bottom:5px; color: #004D71;} 

     .Cau70 {
          width:70%; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right:10px; color: #004D71;
            border-color: #B0B0B0;border-style: dotted; border-width: 1px;
    }

      .Cau40 {
          width:auto; padding-top: 3px; padding-bottom: 3px; padding-left: 30px; color: #004D71;
            border-color: #B0B0B0;border-style: dotted; border-width: 1px;
    }

    .CauMS {
          width: 80px; padding-top: 5px; padding-bottom: 5px; text-align:center; color: #004D71;
            border-color: #B0B0B0;border-style: dotted; border-width: 1px;
    }

    .CauMS5 {
          width: 50px; padding-top: 5px; padding-bottom: 5px; text-align:center; color: #004D71;
            border-color: #B0B0B0;border-style: dotted; border-width: 1px;
    }

    .CauDVT {
          width: 110px; padding-top: 5px; padding-bottom: 5px; text-align:center; color: #004D71;
            border-color: #B0B0B0;border-style: dotted; border-width: 1px;
    }


     .TraLoi20 {width:130px; padding-top: 5px; padding-bottom: 5px; padding-left: 20px; padding-right: 20px;
       border-color: #B0B0B0;border-style: dotted; border-width: 1px;
    }

      .TraLoi10 {width:110px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;
       border-color: #B0B0B0;border-style: dotted; border-width: 1px;
    }
      
      .TraLoi7 {width:7%; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px;
       border-color: #B0B0B0;border-style: dotted; border-width: 1px;
    }  
  
    .Cell1 {width:110px; padding-top: 3px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px;
       border-color: #B0B0B0;border-style: dotted; border-width: 1px;
    }

    .Cell {padding-top: 3px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px;
       border-color: #B0B0B0;border-style: dotted; border-width: 1px; color:#004D71;
    }

    .Cellc {padding-top: 3px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px;
       border-color: #B0B0B0;border-style: dotted; border-width: 1px; text-align:center;
    }

  .TraLoi70 {width: 70%; padding-top: 3px; padding-bottom: 3px; padding-left: 15px; }  
  .TraLoi30 {width: 35%; padding-top: 3px; padding-bottom: 3px; padding-left: 15px; }
  .TraLoi40 {width: 40%; padding-top: 3px; padding-bottom: 3px; padding-left: 15px; }
  .TraLoi {padding-top: 3px; padding-bottom: 3px; padding-left: 15px; }

     .variable {
            background-color: white;
            width:2px;
            border:none;
        }

      .variable input { color: white;}     

        .gridRow-static-height{ height: 23px;} 
        .HeaderHeight { height: 40px;}  
        
           .RowHotTrack  {
               color:#990000!important;
               background-color:#e3f0ff!important;              
           }
           .gridHeader {
               background-color:#FFF2E0!important;    
               border: 1px solid #cccccc;                          
           }
            .gridHeader input {color: #203f7d; }
          
             .gridHeaderCT {
               background-color:#def5fc!important; /*#CAF4FF;    */
               border: 1px solid #cccccc;                          
           }
          
           .gridRow {
                  background-color:white;                  
                  height: 23px!important;
           }
           /*.gridRow input {color: #2A2A2A;}*/

           .gridAlterRow {
                  background-color:#f7fcff;                  
                  height: 23px!important;
           }
            /*.gridAlterRow input {color:#2A2A2A;}*/

            .gridTopPanel {
               text-align:right;
               background-color:#FFFDF6!important; /*#fcfcfd;*/
               padding-right: 10px;             
           }

            /*.dxgvDataRow:hover*/
            .dxgvDataRow {color:#2A2A2A;}
        
            .dxgvHeader table {  
               color:#001A6E!important;
               text-align:center;                  
            }           

           .HeadPad5 {
               padding-top:6px!important;
               padding-bottom:6px!important;
           }  
        
        .Tong {
            width: 10%;
            padding-top: 5px;  
            padding-bottom: 5px;        
            padding-left: 5px;
            padding-right: 5px;
            /*text-align: center;*/
            color:  #333333;
            /*background-color:#AAD5FF;*/            
        }    

          .table-1 {
            padding-left: 17%;
            padding-right: 17%;
        }

            @media (max-width: 768px) {
                .table-1 {
                    padding-left: 1%;
                    padding-right: 1%;
                }
            }

     
.NhapNhay {
  border-radius:25px;
  width: 300px;
  background-color:#336699;
  position: relative;
  animation-name: keyNhapNhay ;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  padding-top: 10px;
  padding-bottom: 10px;
  color:white;
  font-weight: bold;
  text-align: center;  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@keyframes keyNhapNhay {
  20%  { background-color:#fefbd8;}
  40%  { background-color:#ffef96;}
  60%  { background-color:#f18973;}
  80% { background-color:#f7786b;}
 100% { background-color:#622569;}
}

.padT5 {padding-top:5px;}
.padT10 {padding-top:10px;}
.padT20 {padding-top:20px;}

.padB10 {padding-bottom:10px;}
.padB20 {padding-bottom:20px;}


.grid{
    font-size:14px;
    font-family:Tahoma,Arial;
    border: 1px solid #9f9a9a; 
}

              .gridHeaderLoi {
               height: 40px;
               background-color:#E195AB; /* 78B3CE*/
               color:white!important;
               text-align:center!important;
               border-color:white!important;                            
           }

           .gridRowLoi {
                  background-color:#F5F7F8; /**/
                  color:#A0153E;
                  height: 25px!important;
           }         

         /* table header frozen*/
        .wrapper {
            overflow: auto;
            position: relative;
        }

        thead, tr>th {
        position: sticky; 
         background: #fffff4;
        }

        thead {
         top: 0;
         z-index: 2;
        }